Introduction:
Saatchi Art is an online art gallery and an e-commerce platform. It offers free advisory services, original art pieces, and commissioned artwork.
For my project I was inspired to showcase a website that offers various services, that allows for creativity, and a re-design that improves the overall user experience.
Project Requirements:
For this project, the objective was to create a one - page website only using HTML, CSS, and Javascript. The site had to contain the following:
Toggle Mode: This displays a light and dark mode
Product Display: This displays a list of products or services
Game Play: This allows the user to enter a number 1-10 and generates a random number to match.
Contact Form: This allows the user to fill out a form to be able to validate.
The Overall Website:
Purpose: The purpose of the site is to connect artists and buyers. This allows artists to show their art and for people to buy and discover new pieces.
Goals: The overall goal is to use the platform to connect buyers and artists, and showcase a large variety of paintings, sculptures, and photography.
Users: The users of the site are people who are interested in art but mainly targets artists, curators, and collectors.
The Content:
Branding:
Before developing, I began to research the site, it's content and thought of ways to simplify the overall design of the site. This was done by analyzing the layout and researching other competitors.
When starting the design process, I first gathered all the content, colors, font, and images I was going to use to begin creating the wireframes and mockups. I wanted to design it based upon the brands logo colors and using it in the design. I then found fonts that seemed to fit within the company's branding.
Fonts:
Logo Font: Vina Sans, Monospace
Heading Fonts: Rajdhani, Monospace
Other Fonts: Poppins, Sans-serif
Wireframes and Mockups:
For my wireframes and mockups, I used Figma to design and gather all my content. For the layout, I wanted to go with a simple, feasible, and "categorical" design. This is so users aren't overwhelmed with too much content and can easily access the information provided.
I wanted to see how the website would look when adding photos and constructing the layout. Even though the mockups aren't the exact same, I wanted it to look close enough when developing so I could have something to reference to.
HTML:
For my code, I used Visual Studio Code and it was all written from scratch.
This site only requires for one page of HTML, which all the content is sectioned into groups for readability and accessibility. Most of the content are all grouped into id's and classes for styling purposes such as the buttons, links and images. Overall, I wanted to make sure the html content was organized and separated.
CSS:
The CSS was the most time consuming portion of the project. I changed the design and colors of the website multiple times and decided to go with a simple design using "orange" as the main color and theme.
I didn't want the site to be too stylistic, but I still wanted to use this project as a "creative" outlet and to see what I can come up with when playing around with different colors, fonts and styles.
Overall, I wanted the design to make sense and be consistent, especially when switching to dark mode, clicking and hovering over buttons.
Javascript:
Writing the Javascript was the very last step in the development stage.
Toggle Mode
I first worked on the dark mode button, which was really simple and easy. I first targeted the button's class list, added a toggle and then created an event listener.
Product Display
The product display was the last section I coded due to being the most troubling for me. It took me a while to understand how to format the code, but eventually I decided to write out the code by targeting each button and adding and removing the class lists. Ultimately, this process helped me grasp the overall concept of displaying and hiding each product when it was being clicked.
Game Play
The game play didn't take as long to understand, but I did struggle with converting the user's input as a "number" instead of a "string". In the end, my code was able to generate a random number, display the users input, compare both numbers, and displayed if the user won or not.
Contact Form
The contact form took me the longest to complete, at first it was a bit of struggle when only requiring either phone or email input when user chooses there preferred method of contact. So, I targeted the actual button input of email and phone preferences and created variables to be required when the buttons are checked. Overall, this was pretty straightforward and the code was simple and easy to configure.
The Final Website:
Light Mode & Dark Mode
Final Thoughts:
What I Enjoyed The Most:
I enjoyed designing the webpage, conducting research, and developing the overall layout in Figma.
What I would Change:
If I had more time, I would add a proper header to the site, I took out the original due to conflicting colors and style.
Make changes to the images to be consistent in size.
Make changes to the colors and style of buttons due to the lack of accessibility for the user experience.
Click Here to See the Live Site:
